<template>
  <el-container>
    <el-header>
      <TopBar />
    </el-header>
    <el-main class="el-main">
      <div class="content">
        <!-- 学校信息展示 -->
         <div  v-if="schoolId" class="myschool">
        <div class="school-header">
          <div class="school-img-details">
            <img
              :src="schoolLogo ? `http://localhost:5000/uploads/${schoolLogo}` : 'src/assets/xiaohui.png'"
              alt="学校Logo"
              class="school-logo round-img"
            >
          </div>
          <div class="school-info">
            <div class="school-name-details">{{ schoolName || '未选择学校' }}</div>
            <div class="school-description">{{ schoolDescription || '暂无学校简介' }}</div>
            <div class="school-stats">
              <div class="stat-item">
                <span class="stat-value">{{ schoolClubsCount || 0 }}</span>
                <span class="stat-label">社团</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ schoolUsersCount || 0 }}</span>
                <span class="stat-label">学生</span>
              </div>
            </div>
            <div class="school-actions">
               <!-- 新增：创建社团按钮 -->
              <el-button type="success" round @click="openCreateClubDialog" v-if="currentUser && schoolId">创建我的社团</el-button>
              <el-button type="primary" round @click="goToSchoolManage" v-if="isSchoolAdmin">学校管理</el-button>
            </div>
          </div>
        </div>

        <!-- 右侧活动列表和中间内容的容器 -->
        <div class="main-content-wrapper">
          <!-- 社团列表 -->
          <div class="club-list-wrapper">
            <div class="club-list">
              <div class="clubcard">
                <el-card
                  class="club"
                  v-for="club in paginatedData"
                  :key="club._id"
                  @click="goToClubPage(club)"
                >
                  <img
                    :src="club.clubimg ? `http://localhost:5000/uploads/${club.clubimg}` : 'src/assets/shehui.png'"
                    alt=""
                    class="clubimg"
                  >
                  <span class="clubname">{{club.clubname}}</span>
                </el-card>
              </div>

              <div class="a">
                <el-pagination
                  @current-change="handlePageChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="totalItems"
                  size="small"
                  background
                  layout="prev, pager, next"
                  class="pagination"
                />
                <span class="total-count">社团总数：{{ totalItems }}</span>
              </div>
            </div>

            <!-- 我的学校帖子 -->
            <div class="myupost">
              <div class="post-waterfall-wrapper">
                <PostWaterfall
                  ref="postWaterfall"
                  :posts="posts"
                  :columns="0"
                  @post-click="openPostDetail"
                />
              </div>
              <div v-if="posts.length === 0" class="no-posts">
                <i class="el-icon-document"></i>
                <p>暂无学校动态</p>
                <button class="create-post-btn" @click="$router.push('/publish')">发布动态</button>
              </div>
            </div>
          </div>

          <!-- 活动列表 -->
          <div class="active-list">
            <h3 class="section-title">最近活动</h3>
            <div v-if="activities.length === 0" class="no-activities">没有活动</div>
            <template v-else>
              <el-card
                v-for="activity in activities"
                :key="activity._id"
                class="activity-card"
              >
                <h4>{{ activity.activename }}</h4>
                <div class="activity-info">
                  <p><i class="el-icon-time"></i> {{ activity.activetime }}</p>
                  <p><i class="el-icon-location"></i> {{ activity.activeadd }}</p>
                  <p v-if="activity.club"><i class="el-icon-office-building"></i> {{ activity.club.clubname }}</p>
                </div>
              </el-card>
            </template>
          </div>
        </div>
      </div>
      <div v-else="schoolId" class="no-clubs-container">
        <el-empty description="您还没有加入学校" :image-size="200">
          <el-button type="primary" @click="openChooseSchool">去加入学校</el-button>
        </el-empty>
      </div>
      <PostDetailModal
        v-if="selectedPost"
        :post="selectedPost"
        @close="closePostModal"
      />
    </div>
    
      <!-- 新增：创建社团申请对话框 -->
      <el-dialog title="申请创建社团" v-model="createClubDialogVisible" width="600px" :close-on-click-modal="false">
        <el-form :model="clubApplicationForm" :rules="clubApplicationRules" ref="clubApplicationFormRef" label-width="100px">
          <el-form-item label="社团名称" prop="clubname">
            <el-input v-model="clubApplicationForm.clubname" placeholder="请输入社团名称"></el-input>
          </el-form-item>
          <el-form-item label="社团类型" prop="clubType">
            <el-select v-model="clubApplicationForm.clubType" placeholder="请选择社团类型" style="width: 100%;">
              <el-option label="学术类" value="学术类"></el-option>
              <el-option label="体育类" value="体育类"></el-option>
              <el-option label="艺术类" value="艺术类"></el-option>
              <el-option label="实践类" value="实践类"></el-option>
              <el-option label="兴趣类" value="兴趣类"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="社团简介" prop="description">
            <el-input type="textarea" :rows="3" v-model="clubApplicationForm.description" placeholder="请输入社团简介"></el-input>
          </el-form-item>
          <el-form-item label="申请理由" prop="reason">
            <el-input type="textarea" :rows="3" v-model="clubApplicationForm.reason" placeholder="请输入申请创建社团的理由"></el-input>
          </el-form-item>
          <el-form-item label="社团Logo">
             <div class="logo-upload-container">
                <div class="logo-preview-box">
                    <img v-if="clubLogoPreviewUrl" :src="clubLogoPreviewUrl" alt="Logo预览" class="logo-preview-img" />
                    <div v-else class="logo-placeholder-dialog">
                        <i class="el-icon-picture-outline"></i>
                        <span>Logo预览</span>
                    </div>
                </div>
                <el-upload
                    action="#"
                    :http-request="handleClubLogoUpload"
                    :show-file-list="false"
                    accept="image/jpeg,image/png,image/gif"
                    class="logo-uploader"
                >
                    <el-button type="primary">{{ clubApplicationForm.clubLogoFile ? '更换Logo' : '上传Logo' }}</el-button>
                    <div class="upload-tip-dialog">推荐方形图片，小于2MB</div>
                </el-upload>
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeCreateClubDialog">取消</el-button>
            <el-button type="primary" @click="submitClubApplication" :loading="submittingApplication">提交申请</el-button>
          </span>
        </template>
      </el-dialog>
      <ChooseSchoolDialog v-model="showChooseSchoolDialog" />
    </el-main>
  </el-container>
</template>

<script setup>
import TopBar from '../components/TopBar.vue'
import PostDetailModal from '../components/PostDetailModal.vue'
import PostWaterfall from '../components/PostWaterfall.vue'
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import ChooseSchoolDialog from '../components/ChooseSchoolDialog.vue'

const router = useRouter();
const selectedPost = ref(null);
const activities = ref([]);
const clubinfo = ref([]);
const schoolId = ref('');
const currentUser = ref(null);
const schoolName = ref('');
const postWaterfall = ref(null);
const showChooseSchoolDialog = ref(false);
// 学校信息
const schoolLogo = ref('');
const schoolDescription = ref('');
const schoolClubsCount = ref(0);
const schoolUsersCount = ref(0);
const isSchoolAdmin = ref(false);

// 创建社团申请对话框
const createClubDialogVisible = ref(false);
const clubApplicationFormRef = ref(null);
const clubLogoPreviewUrl = ref('');
const submittingApplication = ref(false);
const clubApplicationForm = ref({
  clubname: '',
  clubType: '',
  description: '',
  reason: '',
  clubLogoFile: null, // 存储文件对象
});

const clubApplicationRules = {
  clubname: [{ required: true, message: '请输入社团名称', trigger: 'blur' }],
  clubType: [{ required: true, message: '请选择社团类型', trigger: 'change' }],
  description: [{ required: true, message: '请输入社团简介', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入申请理由', trigger: 'blur' }],
};

// 打开创建社团对话框
const openCreateClubDialog = () => {
  resetClubApplicationForm();
  createClubDialogVisible.value = true;
};

// 关闭创建社团对话框
const closeCreateClubDialog = () => {
  createClubDialogVisible.value = false;
};

// 重置申请表单
const resetClubApplicationForm = () => {
    clubApplicationForm.value = {
        clubname: '',
        clubType: '',
        description: '',
        reason: '',
        clubLogoFile: null,
    };
    clubLogoPreviewUrl.value = '';
    if (clubApplicationFormRef.value) {
        clubApplicationFormRef.value.resetFields();
    }
};
//打开chooseSchool弹窗
function openChooseSchool(){
  console.log('打开学校弹窗')
  showChooseSchoolDialog.value = true
}
// 处理社团Logo上传 (仅预览和存储文件)
const handleClubLogoUpload = (options) => {
    const file = options.file;
    if (file.size > 2 * 1024 * 1024) {
        ElMessage.error('Logo 文件大小不能超过 2MB');
        return;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
        clubLogoPreviewUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
    clubApplicationForm.value.clubLogoFile = file; // 存储文件对象
};

// 提交社团创建申请
const submitClubApplication = () => {
    clubApplicationFormRef.value.validate(async (valid) => {
        if (!valid) return;

        submittingApplication.value = true;
        try {
            const token = localStorage.getItem('token');
            if (!token || !schoolId.value) {
                ElMessage.error('无法提交申请，请确保您已登录并有所属学校');
                return;
            }

            const formData = new FormData();
            formData.append('clubname', clubApplicationForm.value.clubname);
            formData.append('clubType', clubApplicationForm.value.clubType);
            formData.append('description', clubApplicationForm.value.description);
            formData.append('reason', clubApplicationForm.value.reason);
            if (clubApplicationForm.value.clubLogoFile) {
                formData.append('clubLogo', clubApplicationForm.value.clubLogoFile);
            }

            await axios.post(`http://localhost:5000/schools/${schoolId.value}/club-applications`, formData, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'multipart/form-data',
                },
            });

            ElMessage.success('社团创建申请已提交，请等待管理员审核');
            closeCreateClubDialog();
            location.reload();

        } catch (error) {
            console.error('提交社团创建申请失败:', error);
            ElMessage.error('提交申请失败: ' + (error.response?.data?.message || error.message));
        } finally {
            submittingApplication.value = false;
        }
    });
};

const openPostModal = (post) => {
  selectedPost.value = post;
};

const closePostModal = () => {
  selectedPost.value = null;
};

const openPostDetail = (post) => {
  selectedPost.value = post;
};
const posts = ref([]);
const currentPage = ref(1);             // 当前页码
const pageSize = ref(12);               // 每页数量
const totalItems = ref(0);              // 总条目数

// 分页数据
const paginatedData = computed(() => clubinfo.value);

// 页码变化处理
const handlePageChange = async (page) => {
  currentPage.value = page;
  await fetchSchoolClubs();
};

// 跳转到社团详情页
const goToClubPage = (club) => {
  console.log('跳转到社团页面:', club);
  router.push(`/club/${club._id}`);
}

// 跳转到学校管理页面
const goToSchoolManage = () => {
  router.push(`/school/${schoolId.value}/manage`);
}

// 获取当前用户信息
const fetchCurrentUser = async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) return;

    const response = await axios.get('http://localhost:5000/users/me', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    currentUser.value = response.data;
    schoolId.value = currentUser.value.school;
    console.log('当前用户学校ID:', schoolId.value);

    // 获取学校详细信息
    if (schoolId.value) {
      try {
        const schoolResponse = await axios.get(`http://localhost:5000/school/${schoolId.value}`);
        if (schoolResponse.data) {
          const schoolData = schoolResponse.data;
          schoolName.value = schoolData.name;
          schoolLogo.value = schoolData.logo;
          schoolDescription.value = schoolData.description;

          // 获取社团数量
          schoolClubsCount.value = schoolData.clubs ? schoolData.clubs.length : 0;

          // 获取学生数量
          schoolUsersCount.value = schoolData.users ? schoolData.users.length : 0;

          // 检查当前用户是否为学校管理员
          if (schoolData.admin && Array.isArray(schoolData.admin)) {
            isSchoolAdmin.value = schoolData.admin.includes(currentUser.value._id);
          } else if (schoolData.admin) {
            isSchoolAdmin.value = schoolData.admin === currentUser.value._id;
          }

          console.log('学校信息:', schoolData);
          console.log('当前用户是否为学校管理员:', isSchoolAdmin.value);
        }
      } catch (error) {
        console.error('获取学校信息失败:', error);
      }

      // 获取学校社团和活动
      await Promise.all([
        fetchSchoolClubs(),
        fetchSchoolActivities(),
        fetchSchoolPosts()
      ]);
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

// 获取学校社团
const fetchSchoolClubs = async () => {
  try {
    if (!schoolId.value) {
      console.log('没有学校ID，无法获取社团');
      return;
    }

    console.log(`正在获取学校(ID: ${schoolId.value})的社团...`);
    const response = await axios.get(`http://localhost:5000/schools/${schoolId.value}/clubs`, {
      params: {
        page: currentPage.value,
        limit: pageSize.value
      }
    });

    console.log('获取社团响应:', response.data);

    if (response.data.clubs && response.data.clubs.length > 0) {
      clubinfo.value = response.data.clubs;
      console.log('成功获取社团数据:', clubinfo.value);
    } else {
      console.log('未找到社团数据');
      clubinfo.value = [];
    }

    totalItems.value = response.data.pagination.total;
  } catch (error) {
    console.error('获取学校社团失败:', error);
    if (error.response) {
      console.error('错误响应数据:', error.response.data);
      console.error('错误状态码:', error.response.status);
    } else if (error.request) {
      console.error('未收到响应');
    } else {
      console.error('错误信息:', error.message);
    }
    clubinfo.value = [];
    totalItems.value = 0;
  }
};

// 获取学校活动
const fetchSchoolActivities = async () => {
  try {
    if (!schoolId.value) return;

    const response = await axios.get(`http://localhost:5000/schools/${schoolId.value}/activities`);
    activities.value = response.data;
  } catch (error) {
    console.error('获取学校活动失败:', error);
  }
};

// 获取学校帖子
const fetchSchoolPosts = async () => {
  try {
    if (!schoolId.value) {
      console.log('没有学校ID，无法获取学校帖子');
      return;
    }

    console.log(`正在获取学校(ID: ${schoolId.value})的帖子...`);
    // 获取学校专属的帖子
    const schoolPostsResponse = await axios.get(`http://localhost:5000/schools/${schoolId.value}/posts`, {
      params: {
        limit: 20
      }
    });

    console.log('获取学校帖子响应:', schoolPostsResponse.data);

    // 如果成功获取到学校帖子，使用学校帖子数据
    if (schoolPostsResponse.data && Array.isArray(schoolPostsResponse.data)) {
      // 详细输出每个帖子的内容，用于调试
      schoolPostsResponse.data.forEach((post, index) => {
        console.log(`帖子 ${index + 1}:`, JSON.stringify(post));
      });

      // 处理数据格式，确保有必要的字段
      const formattedPosts = schoolPostsResponse.data.map(post => {
        // 确保每个帖子至少有这些必要的字段
        return {
          ...post,
          _id: post._id || post.id, // 确保有_id字段
          id: post._id || post.id, // 用于兼容性
          image: post.image, // 图片字段
          title: post.title || '无标题', // 标题
          description: post.description || '', // 描述
          author: post.author || '匿名用户', // 确保有作者
          authorimg: post.authorimg || '../assets/touxiang.png', // 确保有作者头像
          likes: post.likedBy?.length || 0, // 确保有点赞数
        };
      });

      // 按创建时间排序
      posts.value = formattedPosts.sort((a, b) =>
        new Date(b.createdAt) - new Date(a.createdAt)
      );

      console.log('成功格式化帖子数据:', posts.value);

      // 确保组件更新后重新计算布局
      nextTick(() => {
        setTimeout(() => {
          if (postWaterfall.value) {
            console.log('手动触发瀑布流重新计算');
            postWaterfall.value.calculateColumns();
            postWaterfall.value.resizeAllWaterfallItems();
          }
        }, 100);
      });
    } else {
      console.log('未找到学校帖子');
      posts.value = [];
    }
  } catch (error) {
    console.error('获取学校帖子出错:', error);
    if (error.response) {
      console.error('错误响应数据:', error.response.data);
      console.error('错误状态码:', error.response.status);
    } else if (error.request) {
      console.error('未收到响应');
    } else {
      console.error('错误信息:', error.message);
    }
    posts.value = [];
  }
};

// 处理图片加载，根据宽高比调整图片高度
function onImageLoad(event, postId) {
  const img = event.target;
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;

  // 计算宽高比
  const aspectRatio = naturalWidth / naturalHeight;

  // 根据宽高比决定显示高度
  let displayHeight;
  if (aspectRatio > 1.2) { // 横图
    displayHeight = '160px';
  } else if (aspectRatio < 0.8) { // 竖图
    displayHeight = '240px';
  } else { // 方图
    displayHeight = '200px';
  }

  // 设置图片高度
  img.style.height = displayHeight;

  // 触发瀑布流重排
  nextTick(() => {
    updateCardHeight(img.closest('.waterfall-item'));
  });
}

// 统一更新卡片高度的函数
function updateCardHeight(item) {
  if (!item) return;

  const cardContent = item.querySelector('.card-content');
  if (cardContent) {
    const contentHeight = cardContent.getBoundingClientRect().height;
    const rowGap = 16; // 与CSS中的grid-gap相匹配
    const rowHeight = 1; // grid-auto-rows 设置为1px
    const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// 修改onMounted以获取数据
onMounted(async () => {
  const token = localStorage.getItem('token');
  if (!token) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return; // 阻止后续代码执行
  }

  await fetchCurrentUser();

  // 在帖子加载后设置窗口大小变化监听
  nextTick(() => {
    // 确保所有卡片都有正确的高度
    setTimeout(() => {
      console.log('准备更新卡片高度，当前帖子数量:', posts.value.length);
      const cardItems = document.querySelectorAll('.waterfall-item');
      console.log('找到的卡片元素数量:', cardItems.length);
      cardItems.forEach(item => updateCardHeight(item));

      // 手动触发瀑布流组件重新计算
      if (postWaterfall.value) {
        console.log('手动触发瀑布流重新计算');
        postWaterfall.value.calculateColumns();
        postWaterfall.value.resizeAllWaterfallItems();
      }
    }, 500); // 增加延迟时间

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      const cardItems = document.querySelectorAll('.waterfall-item');
      cardItems.forEach(item => updateCardHeight(item));
    });
  });
});

</script>
<style>
body {
  background-color: #1f1b24;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar{
  display: none;
}
</style>
<style scoped>

.content {
  position: absolute; /* 绝对定位 */
  top: 60px; /* 距离顶部的距离等于顶部区域的高度 */
  left: 10vw; /* 距离左侧的距离等于左侧区域的宽度 */
  right: 10vw; /* 距离右侧为0，撑满剩余空间 */
  bottom: 0; /* 距离底部为0，撑满剩余空间 */
  padding: 20px; /* 为内容添加内边距 */
}

/* 学校信息样式 */
.school-header {
  display: flex;
  padding: 20px;
  background-color: #28232e;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.school-img-details {
  margin-right: 30px;
}

.school-logo {
  width: 180px;
  height: 180px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.school-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.school-name-details {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
}

.school-description {
  color: #b0bec5;
  line-height: 1.6;
  margin-bottom: 20px;
  max-height: 80px;
  overflow: hidden;
}

.school-stats {
  display: flex;
  margin-bottom: 25px;
}

.school-actions {
  margin-top: auto;
  display: flex; /* 使用flex布局 */
  gap: 10px; /* 设置按钮之间的间距 */
}

.round-img {
  border-radius: 50%;
  object-fit: cover;
}

/* 主要内容包装器，包含活动列表和中间内容 */
.main-content-wrapper {
  display: flex;
  gap: 20px;
}

/* 社团列表和帖子包装器 */
.club-list-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.active-list {
  position: relative;
  width: 17vw;
  padding: 15px 0;
  height: auto;
  background-color: #28232e;
  border-radius: 15px;
  max-height: 85vh;
  overflow-y: auto;
}
.club-list {
  display: flex; /* 使用 Flexbox */
  flex-direction: column; /* 垂直排列 */
  width: 100%;
  max-width: 100%;
  /* margin-left: 20px; */

  background-color: #28232e;
  border-radius: 15px;
  position: relative; /* 允许绝对定位的子元素 */
}
.clubcard {
  display: grid; /* 使用 Flexbox */
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start; /* 左对齐 */
  flex-grow: 1; /* 占满剩余空间 */
}
.club {
  cursor: pointer;
  background-color: #1f1b24;
  color: aliceblue;
  float: left;
  width: 14vw;
  margin-left: 10px;
  margin-top: 10px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid transparent;
  border-color: #505050;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
}
.clubimg {
  width: 50px;
  height: 50px;
}

.a{
  display: flex; /* 使用 Flexbox */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐所有子元素 */
  margin-top: 10px; /* 为分页器添加顶部间隔 */
  padding-bottom: 10px; /* 为容器添加底部内边距 */
}
.pagination {
  margin-bottom: 5px;
}
.total-count{
  float: left;
}
/* 我的学校帖子 */
.myupost {
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1px;
  grid-gap: 16px; */
  width: 100%;
  margin-top: 20px;
  background-color: #28232e;
  border-radius: 15px;
  /* padding: 20px; */
  /* padding-right: 20px; */

}
.post-waterfall-wrapper {
  padding: 10px;
  min-height: 200px;
}
.custom-card {
  border: 1px solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  float: left;
  width: 260px;
  margin-left: 10px;
  margin-top: 10px;
  background-color: #1f1b24;
  border-color: #505050;

  /* background-color: #f5e9d9; */
}
.custom-card .card-title {
  color:aliceblue; /* 设置文字颜色 */
  text-decoration: none;
  font-weight: 670;
  max-height: 50px;
  overflow: hidden; /* 隐藏溢出的内容 */
}
.custom-card:hover .card-title {
  color: #00aeff; /* 设置悬停时文字颜色 */
}
.el-card:hover {

  transform: scale(1.02); /* 悬停时缩放效果 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* max-height: 200px; */
  border-radius: 12px;
}

/* 帖子作者信息 */
.author-wrapper {
  align-items: center;
  color:aliceblue;
  display: flex;
  font-size: 13px;
  height: 20px;
  justify-content: space-between;
  margin-top: 6px;
}
.author {
  align-items: center;
  color: inherit;
  display: flex;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.touxiang {
  width: 16px;
  height: 16px;
}
.like-wapper {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: relative;
}

/* 添加stat-item相关样式以确保显示正确 */
.stat-item {
  margin-right: 30px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #00aeff;
  display: block;
}

.stat-label {
  color: #b0bec5;
  font-size: 14px;
}

/* 小红书风格瀑布流布局 */
.waterfall-item {
  grid-row-end: span auto;
  break-inside: avoid;
  transition: all 0.3s ease;
}

.card-content {
  background-color: #2d2636;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 100px;
  position: relative;
  backdrop-filter: blur(5px);
}

.waterfall-item:hover {
  transform: translateY(-8px);
}

.waterfall-item:hover .card-content {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(123, 31, 162, 0.3);
  border-color: rgba(123, 31, 162, 0.5);
}

.image-container {
  width: 100%;
  overflow: hidden;
  min-height: 80px;
  background-color: #1a171c;
  position: relative;
}

.image-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(45, 38, 54, 1), rgba(45, 38, 54, 0));
  z-index: 1;
  pointer-events: none;
}

.card-image {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  display: block;
  filter: brightness(1.05);
}

.waterfall-item:hover .card-image {
  transform: scale(1.07);
}

.post-info {
  padding: 15px 18px;
  position: relative;
}

.post-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 更现代的作者信息 */
.author-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #b0bec5;
  margin-top: 5px;
}

.author {
  display: flex;
  align-items: center;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(22, 18, 26, 0.35);
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(3px);
}

.avatar-sm, .like-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}

.like-count {
  display: flex;
  align-items: center;
  background-color: rgba(22, 18, 26, 0.35);
  padding: 5px 10px;
  border-radius: 20px;
  backdrop-filter: blur(3px);
  transition: all 0.3s ease;
}

.like-count:hover {
  background-color: rgba(123, 31, 162, 0.4);
  transform: scale(1.05);
}

/* 响应式布局 */
@media (min-width: 1400px) {
  .myupost {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1399px) and (min-width: 1000px) {
  .myupost {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 999px) and (min-width: 700px) {
  .myupost {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 699px) {
  .myupost {
    grid-template-columns: repeat(1, 1fr);
  }
}

.section-title {
  color: #ffffff;
  font-size: 20px;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(52, 152, 219, 0.3);
}

.no-activities {
  color: #666;
  text-align: center;
  padding: 20px;
  background: #1f1b24;
  border-radius: 8px;
  border: 1px solid #333;
  margin: 0 15px;
}

.activity-card {
  margin: 15px;
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: white;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  backdrop-filter: blur(5px);
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.activity-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.activity-info p {
  margin: 8px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.activity-info p i {
  margin-right: 8px;
  font-size: 16px;
}

/* 添加卡片的渐变边框效果 */
.activity-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, #00aeff, #3498db);
  border-radius: 13px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activity-card:hover::before {
  opacity: 1;
}

/* .myupost-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} */

.no-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #28232e;
  border-radius: 12px;
  color: #777;
  text-align: center;
  padding: 20px;
}

.no-posts i {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0.6;
}

.no-posts p {
  margin-bottom: 20px;
  font-size: 16px;
}

.create-post-btn {
  padding: 10px 20px;
  background: linear-gradient(45deg, #3f51b5, #2196f3);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.create-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

/* 响应式布局 */
@media (max-width: 1400px) {
  .school-header {
    flex-direction: column;
  }

  .school-img-details {
    margin: 0 auto 20px;
    text-align: center;
  }
}

/* 创建社团申请对话框内 Logo 上传样式 */
.logo-upload-container {
    display: flex;
    align-items: center;
    gap: 20px; /* 预览和上传按钮之间的间距 */
}

.logo-preview-box {
    width: 100px;
    height: 100px;
    border: 1px dashed #555; /* 调整边框颜色 */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #333; /* 深色背景 */
}

.logo-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder-dialog {
    text-align: center;
    color: #bbb; /* 调整文字颜色 */
}
.logo-placeholder-dialog i {
    font-size: 30px;
    display: block;
    margin-bottom: 5px;
}

.logo-uploader {
    flex-grow: 1; /* 让上传按钮部分占据剩余空间 */
}

.upload-tip-dialog {
    font-size: 12px;
    margin-left: 5px;
    color: #bbb; /* 调整提示文字颜色 */
    margin-top: 5px;
}

/* 深色模式适配 El-Select 下拉菜单 */
:deep(.el-select-dropdown) {
  background-color: #2b2b2b !important; /* 深色背景 */
  border: 1px solid #444 !important;
}

:deep(.el-select-dropdown__item) {
  color: #e0e0e0 !important; /* 浅色文字 */
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: #444 !important; /* 悬停背景色 */
}

:deep(.el-select-dropdown__item.selected) {
  color: #00aeff !important; /* 选中项颜色 */
  background-color: #3a3a3a !important;
  font-weight: bold;
}

:deep(.el-popper__arrow::before) {
    background: #2b2b2b !important; /* 箭头背景色 */
    border-color: #444 !important;
}
</style>
